//	下钻
import React, { useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { Switch } from 'antd';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
}

const DrillDown = ( props: IProps ) => {
	const { config, onValuesChange } = props;

	//	是否开启
	const [ isDrillDown, setDrillDown ] = useState( config.mutual && config.mutual.isDrillDown === true ? true : false );

	const handleChange = ( value ) => {
		setDrillDown( value );

		onValuesChange( config.type, config.key, {
			isDrillDown: value
		}, 'mutual' );
	};

	return (

		<div>
			<FormItem
				label="是否开启" labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<Switch checked={ isDrillDown } onChange={ handleChange }/>
			</FormItem>
		</div>
	);
};


export default React.memo( DrillDown );
